<template>
  <div :class="wrapClass">
    <div class="top" @click="fnMain">
      <!--suppress HtmlUnknownTarget -->
      <img class="img img1" :src="good.view1" alt="" draggable="false"/>
      <!--suppress HtmlUnknownTarget -->
      <img class="img img2" :src="good.view2" alt="" draggable="false"/>
      <span class="title">{{good.title}}</span>
      <ul class="util">
        <li class="li1">
          <el-tooltip effect="dark" content="Quick View" placement="right">
            <i class="el-icon-zoom-in" @click="fnShow"/>
          </el-tooltip>
        </li>
        <li class="li2">
          <el-tooltip effect="dark" content="Add To Cart" placement="right">
            <i class="el-icon-goods" @click="fnCar"/>
          </el-tooltip>
        </li>
        <li class="li3">
          <el-tooltip effect="dark" content="Add To Collection" placement="right">
            <i class="el-icon-star-off" @click="fnCollect"/>
          </el-tooltip>
        </li>
        <li class="li4">
          <el-tooltip effect="dark" content="Compare" placement="right">
            <i class="el-icon-sort" @click="fnCompare"/>
          </el-tooltip>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <span class="price">${{good.price}}</span>
      <span class="hot">
        <el-rate :value="value" disabled :max="5" :allow-half="true"/>
      </span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'GoodBox2',
  props: {
    good: {
      type: Object,
      required: true
    },
    max: {
      type: [Number, String],
      required: false,
      default: 5
    },
    size: {
      type: [String, Number],
      default: 'default',
      validator: function (value) {
        return ['default', 'small', 'mini'].indexOf(value) !== -1
      }
    }
  },
  data: () => {
    return {
    }
  },
  computed: {
    value () {
      return this.good.hot * 5 / this.max
    },
    wrapClass () {
      return {
        wrap: true,
        wrapDefault: this.size === 'default',
        wrapSmall: this.size === 'small',
        wrapMini: this.size === 'mini'
      }
    }
  },
  methods: {
    fnShow () {
      this.$emit('show', this.good.id)
    },
    fnCar () {
      this.$emit('car', this.good.id)
    },
    fnCollect () {
      this.$emit('collect', this.good.id)
    },
    fnCompare () {
      this.$emit('compare', this.good.id)
    },
    fnMain () {
      // this.$emit('main', this.good.id)
      this.$router.push('/shopDetail/' + this.good.id)
    }
  }
}
</script>

<!--suppress CssUnusedSymbol -->
<style>
  .wrapMini .hot .el-rate__item{
    margin: 0 -4px;
  }
</style>

<style lang="scss" scoped>

  $time:1s;
  $utilTime:.8s;

  .wrap{
    width: 255px;
    user-select: none;
    transition: $time;

    .top{
      width: 100%;
      height: 350px;
      padding: 40px;
      cursor: pointer;
      position: relative;
      overflow: hidden;

      .img{
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
      }

      .img1{
        opacity: 1;
        transition: $time;
      }

      .img2{
        opacity: 0;
        transition: $time;
      }

      .title{
        width: 100%;
        padding: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        color: rgb(51, 51, 51);
        font-size: 18px;
        font-weight: 700;
        transition: $time;
      }

      .util{
        top: 50%;
        left: 0;
        height: 100%;
        margin-top: -50%;
        padding: 40px 2px;
        position: absolute;
        list-style: none;
        display: block;
        z-index: 4;
        opacity: 1;

        li{
          display: block;
          margin: 4px 0;
          width: 40px;
          height: 40px;
          opacity: 1;
          transition: $utilTime;
          position: relative;
          text-align: center;
          background: white;

          i{
            width: 30px;
            height: 30px;
            margin: 5px;
            font-size: 24px;
            font-weight: 700;
            line-height: 30px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
          }

        }

        li:hover{

          background: rgb(33, 36, 36);
            transition: .8s;

          i{
            color: rgb(255, 255, 255);
          }

        }

        .li1{
          margin-left: -50px;
        }

        .li2{
          margin-left: -100px;
        }

        .li3{
          margin-left: -150px;
        }

        .li4{
          margin-left: -200px;
        }

      }

    }

    .bottom{
      width: 100%;
      height: 66px;
      padding: 20px;
      position: relative;

      .price{
        float: left;
        font-size: 16px;
        font-weight: 700;
        color: darkgray;
        transition: .8s;
      }

      .hot{
        float: right;
      }
    }

  }

  .wrap:hover{
    width: 255px;
    transition: $time;

    .top{
      width: 100%;
      height: 350px;
      padding: 10px;
      position: relative;

      .img1{
        opacity: 0;
        transition: $time;
      }

      .img2{
        opacity: 1;
        transition: $time;
      }

      .title{
        color: darkgrey;
        transition: $time;
      }

      .util{
        z-index: 4;
        opacity: 1;

        li{
          margin: 4px 0;
          opacity: 1;
        }

      }

    }

    .bottom{
      .price{
        color: rgb(255, 115, 83);
        transition: .8s;
      }
    }

  }

  .wrapSmall{
    width: 204px;
    transition: $time;

    .top{
      height: 280px;
      padding: 32px;

      .title{
        width: 100%;
        padding: 16px;
        font-size: 16px;
        font-weight: 700;
        transition: $time;
      }

      .util{
        padding: 32px 1px;

        li{
          margin: 3px 0;
          width: 32px;
          height: 32px;

          i{
            width: 24px;
            height: 24px;
            margin: 4px;
            font-size: 20px;
            font-weight: 700;
            line-height: 24px;
          }

        }

        .li1{
          margin-left: -40px;
        }

        .li2{
          margin-left: -80px;
        }

        .li3{
          margin-left: -120px;
        }

        .li4{
          margin-left: -160px;
        }

      }

    }

    .bottom{
      height: 52px;
      padding: 16px;

      .price{
        margin-top: 1.5px;
        font-size: 15px;
        font-weight: 700;
        transition: .8s;
      }

    }

  }

  .wrapSmall:hover{
    width: 204px;
    transition: $time;

    .top{
      height: 280px;
      padding: 2px;

      .util{

        li{
          margin: 3px 0;
        }
      }
    }

  }

  .wrapMini{
    width: 164px;
    transition: $time;

    .top{
      height: 224px;
      padding: 25px;

      .title{
        width: 100%;
        padding: 12.8px;
        font-size: 12.8px;
        font-weight: 700;
        transition: $time;
      }

      .util{
        padding: 25.6px 1px;

        li{
          margin: 2.4px 0;
          width: 25.6px;
          height: 25.6px;

          i{
            width: 19.2px;
            height: 19.2px;
            margin: 3px;
            font-size: 16px;
            font-weight: 700;
            line-height: 19.2px;
          }

        }

        .li1{
          margin-left: -32px;
        }

        .li2{
          margin-left: -64px;
        }

        .li3{
          margin-left: -96px;
        }

        .li4{
          margin-left: -128px;
        }

      }

    }

    .bottom{
      height: 41.6px;
      padding: 12.8px;

      .price{
        margin-top: 3px;
        font-size: 12px;
        font-weight: 700;
        transition: .8s;
      }

      .hot{

      }

    }

  }

  .wrapMini:hover{
    width: 164px;
    transition: $time;

    .top{
      height: 224px;
      padding: 25px;

      .util{

        li{
          margin: 3px 0;
        }
      }
    }

  }
</style>
